<!--
 * @Author: tkp
 * @Date: 2025-01-03 15:13:46
-->
<template>
  <div>
    <div class="comp_contain">
      <div class="comp_search">
        <Input v-model="bloc.queryForm.roleName" size="medium" clearable placeholder="请输入角色名称"></Input>
        <Input v-model="bloc.queryForm.roleCode" size="medium" clearable placeholder="请输入角色编码"></Input>
        <Select size="medium" placeholder="请选择是否启用" :clearable="false" v-model="bloc.queryForm.enable" :data="bloc.enableList" :jsonType="{'value':'id','label':'label'}"></Select>
        <el-button type="text" size="medium" icon="el-icon-search" @click="query">搜索</el-button>
        <el-button type="text" size="medium" icon="el-icon-delete" @click="clearForm">清除条件</el-button>
        <el-button type="text" size="medium" icon="el-icon-plus" @click="add" v-hasRole="{frontRoute:'add'}">新增</el-button>
      </div>
      <div class="comp_body">
        <Table :tableOption="bloc.tableOption" tableHeight="calc(100vh - 212px)" :tableData="bloc.tableData" ref="MTable" operation :cellStyle="{'text-align':'center'}">
          <template slot="enable" slot-scope="scope">
            <span v-if="scope.row.enable=='0'">否</span>
            <span v-else>是</span>
          </template>
          <template slot="menu" slot-scope="scope">
            <el-button type="text" @click="modifyItem(scope.row)" v-hasRole="{frontRoute:'modify'}">编辑</el-button>
            <el-button type="text" @click="roleMenuItem(scope.row)" v-hasRole="{frontRoute:'role'}">菜单权限</el-button>
            <el-button type="text" @click="delItem(scope.row)" v-hasRole="{frontRoute:'del'}">删除</el-button>
          </template>
        </Table>
      </div>
    </div>
    <el-dialog title="新增角色" :close-on-click-modal="false" :visible.sync="bloc.addPop" width="30%" append-to-body destroy-on-close v-if="bloc.addPop">
      <Add @addData="addDataFun"></Add>
    </el-dialog>
    <el-dialog title="编辑角色" :close-on-click-modal="false" :visible.sync="bloc.editPop" width="30%" append-to-body destroy-on-close v-if="bloc.editPop">
      <Edit :data="bloc.rowItem" @editData="editDataFun"></Edit>
    </el-dialog>
    <el-drawer title="菜单权限" size="50%" direction="rtl" :visible.sync="bloc.roleMenuPop" :close-on-press-escape="false" destroy-on-close append-to-body>
      <RoleMenu :data="bloc.rowItem" @roleMenuData="roleMenuDataFun"></RoleMenu>
    </el-drawer>
  </div>
</template>

<script>
import { IndexBloc } from './bloc/index'
import Add from './temp/add.vue'
import Edit from './temp/edit.vue'
import RoleMenu from './temp/roleMenu.vue'
export default {
  name: 'authManage',
  data() {
    return {
      bloc: new IndexBloc()
    }
  },
  components: {
    Add,
    Edit,
    RoleMenu,
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      this.bloc.pageNum = 1
      this.query()
    },
    query() {
      let param = {
        roleName: this.bloc.queryForm.roleName,
        roleCode: this.bloc.queryForm.roleCode,
        enable: this.bloc.queryForm.enable,
      }
      this.bloc.load(param)
    },
    add() {
      this.bloc.rowItem = ''
      this.bloc.addPop = true
    },
    addDataFun(e) {
      if (e) {
        this.bloc.add(e).then(res => {
          this.messageSuccPop(res.msg)
          this.query()
          this.bloc.addPop = false
        })
      } else {
        this.bloc.addPop = false
      }
    },
    modifyItem(item) {
      this.bloc.rowItem = item
      this.bloc.editPop = true
    },
    editDataFun(e) {
      if (e) {
        this.bloc.modify(e).then(res => {
          this.messageSuccPop(res.msg)
          this.query()
          this.bloc.editPop = false
        })
      } else {
        this.bloc.editPop = false
      }
    },
    roleMenuItem(item) {
      this.bloc.rowItem = item
      this.bloc.roleMenuPop = true
    },
    roleMenuDataFun(e) {
      if (e) {
        this.bloc.saveMenuRole(e).then(res => {
          this.messageSuccPop(res.msg)
          this.query()
          this.bloc.roleMenuPop = false
        })
      } else {
        this.bloc.roleMenuPop = false
      }
    },
    delItem(item) {
      this.$confirm('是否删除该角色?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.bloc.del(item.roleId).then(res => {
          this.messageSuccPop(res.msg)
          this.query()
        })
      })
    },
    clearForm() {
      this.bloc.queryForm.roleCode = ''
      this.bloc.queryForm.roleName = ''
      this.bloc.queryForm.enable = ''
      this.load()
    },
  }
}
</script>

<style lang="scss" scoped>
.comp_contain {
  overflow: hidden;
  padding: 20px;
  border-radius: 6px;
  .comp_search {
    background: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border-radius: 14px;
    margin-bottom: 16px;
  }
  .comp_body {
    border-radius: 14px;
    background: #fff;
    padding: 10px;
  }
  .comp_foot {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}
</style>